import React, { Component, createRef } from 'react';
import "./head.css";
import { withRouter } from "react-router-dom";
import Logo from "../../../assets/images/logo.png";
import { SearchBar } from 'antd-mobile';
import { Carousel } from 'antd-mobile';
//导入轮播的图
import Lb01 from "../../../assets/images/lunbo1.jpg";
import Lb02 from "../../../assets/images/lunbo2.jpg";
import Lb03 from "../../../assets/images/lunbo3.jpg";
import Lb04 from "../../../assets/images/lunbo4.jpg";
import Lb05 from "../../../assets/images/lunbo5.jpg";
import Lb06 from "../../../assets/images/lunbo6.jpg";
import Lb07 from "../../../assets/images/lunbo7.jpg";
import Lb08 from "../../../assets/images/lunbo8.png";
import Lb09 from "../../../assets/images/lunbo9.jpg";
// 列表图
import Jiu01 from "../../../assets/images/jiu01.jpg";
import Jiu02 from "../../../assets/images/jiu02.jpg";
import Jiu03 from "../../../assets/images/jiu03.jpg";
import Jiu04 from "../../../assets/images/jiu4.jpg";
import Jiu05 from "../../../assets/images/jiu5.jpg";
import Jiu06 from "../../../assets/images/jiu6.jpg";
import Jiu07 from "../../../assets/images/jiu7.jpg";
import Jiu08 from "../../../assets/images/jiu8.jpg";
import Jiu09 from "../../../assets/images/jiu9.jpg";
import Jiu10 from "../../../assets/images/jiu10.jpg";
// 引入大图
import Imgbig from "../../../assets/images/big1.jpg";
import BigLeft from "../../../assets/images/big-left.jpg";
import BigRight from "../../../assets/images/big-right.jpg";
class Head extends Component {

    searchRef = createRef()
    state = {
        inputVal: "",
        productList: [
        ],
        data: [
            {
                id: 0,
                dataindex:1,
                img: Lb01
            },
            {
                id: 1,
                dataindex:2,
                img: Lb02
            },
            {
                id: 2,
                dataindex:1,
                img: Lb03
            },
            {
                id: 3,
                dataindex:2,
                img: Lb04
            },
            {
                id: 4,
                dataindex:2,
                img: Lb05
            },
            {
                id: 5,
                dataindex:1,
                img: Lb06
            },
            {
                id: 6,
                dataindex:2,
                img: Lb07
            },
            {
                id: 7,
                dataindex:1,
                img: Lb08
            },
            {
                id: 8,
                dataindex:2,
                img: Lb09
            },
        ],
        list_img: [
            {
                id: 0,
                dataindex: 1,
                img:
                {
                    src: Jiu01
                }
            },
            {
                id: 1,
                dataindex: 2,
                img:
                {
                    src: Jiu02
                }
            },
            {
                id: 2,
                dataindex: 3,
                img:
                
                {
                    src: Jiu03
                }
            },
            {
                id: 3,
                dataindex: 4,
                img:
                {
                    src: Jiu04
                }
            },
            {
                id: 4,
                dataindex: 5,
                img:
                {
                    src: Jiu05
                }
            },
            {
                id: 5,
                dataindex: 1,
                img:
                {
                    src: Jiu06
                }
            },
            {
                id: 6,
                dataindex: 2,
                img:
                {
                    src: Jiu07
                }
            },
            {
                id: 7,
                dataindex: 3,
                img:
                {
                    src: Jiu08
                }
            },
            {
                id: 8,
                dataindex: 4,
                img:
                {
                    src: Jiu09
                }
            },
            {
                id: 9,
                dataindex: 5,
                img:
                {
                    src: Jiu10
                }
            },
        ],
        imgHeight: 180,
        slideIndex: 2,
    };
    componentDidMount() {
        console.log(this.props);
        window.addEventListener('scroll', this.handleScroll, true)
    };
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll, true)
    };
    handleScroll = (e) => {
        let top = document.documentElement.scrollTop
        // console.log("he ", top);
    };
    // 搜索框点击跳转
    hendleClickSc = () => {
        console.log(this.props);
        this.props.history.push("/searchCenter");

    };
    // 列表点击事件
    headleListCLick=(e)=>{
        let cid = e.target.getAttribute("dataindex");
        console.log(cid);
        this.props.history.push("/GoodsList/"+cid)

    };
    // 轮播图点击跳转
    headleLuBoClick =(e)=>{
        let cid = e.target.getAttribute("dataindex");
        let id = e.target.getAttribute("dataindex");
        console.log(cid);
        this.props.history.push("/GoodsDetail/"+cid+"/"+id)
    }


    render() {
        return (

            <div className="head-allbox">
                {/* 搜索框 */}

                <div className="head-search"  >

                    <div className="head-search-left">
                        <img src={Logo} alt="" />
                    </div>
                    <div className="head-search-right" onClick={this.hendleClickSc}>
                        <SearchBar

                            className="head-search-box"
                            value={this.state.inputVal}
                            placeholder="整箱团购惠 加19.9元得双支皮盒"
                            onSubmit={value => console.log(value, 'onSubmit')}
                            onClear={value => console.log(value, 'onClear')}
                            onFocus={() => console.log('onFocus')}
                            onBlur={() => console.log('onBlur')}
                            showCancelButton
                            cancelText
                            onChange={(value) => {
                                console.log(value)
                                this.setState({
                                    inputVal: value,
                                })
                            }}
                        />
                    </div>
                </div>

                {/*轮播图 */}

                <div className="head-lunbo">

                    <Carousel
                        autoplay
                        infinite
                    >
                        {this.state.data.map(val => (
                            <a
                                onClick={this.headleLuBoClick}
                                key={val}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    dataindex={val.dataindex}
                                   onClick={this.headleLuBoClick}
                                    src={val.img}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                </div>

                {/* 头部列表页 */}
                <div className="head-list" >
                    {this.state.list_img.map(val => (
                        <a
                            onClick={this.headleListCLick}
                            key={val.id}
                            
                        >
                            <img
                                dataindex={val.dataindex}
                                onClick={this.headleListCLick}
                                src={val.img.src}
                            />
                        </a>
                    ))}
                </div>
                
                {/* 头部banner图 */}
                <div className="head-banner">
                    <img src={Imgbig} alt=""/>
                </div>
                <div className="head-leftandright">
                    <div className="head-img-left">
                        <img src={BigLeft} alt=""/>
                    </div>
                    <div className="head-img-right">
                        <img src={BigRight} alt=""/>
                    </div>
                </div>
                        
            </div>




        );
    }
}

export default withRouter(Head);
